<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- meta:desc -->
     <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台">
     <!-- meta:kw -->
     <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
     <title>小兔鲜儿-新鲜、惠民、快捷！</title>
     <!-- css -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul class="fr">
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#"><span></span>手机版</a></li>
            </ul>
        </div>
    </div>

    <!-- 头部 -->
    <div class="header wrapper">
        <div class="logo fl">
            <h1><a href="#">小兔仙</a></h1>
        </div>
        <div class="nav fl">
            <ul>
                <li class="fl"><a href="#">首页</a></li>
                <li class="fl"><a href="#">首页</a></li>
                <li class="fl"><a href="#">首页</a></li>
                <li class="fl"><a href="#">首页</a></li>
                <li class="fl"><a href="#">首页</a></li>
                <li class="fl"><a href="#">首页</a></li>
                <li class="fl"><a href="#">首页</a></li>
                <li class="fl"><a href="#">首页</a></li>
                <li class="fl"><a href="#">首页</a></li>
            </ul>
        </div>
        <div class="search fl">
            <input type="text" placeholder="搜一搜">
            <span></span>
        </div>
        <div class="car fl">
            <span>2</span>
        </div>
    </div>

    <!-- banner图 -->
    <div class="banner">
        <div class="wrapper">
            <ul>
                <li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
                <li></li>
            </ul>
            <!-- 侧导航 -->
            <div class="aside">
                <ul>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                </ul>
            </div>
            <!-- 箭头 -->
                <!-- prev: 上一个 -->
            <a href="#" class="prev"></a>
                <!-- next : 下一个 -->
            <a href="#" class="next"></a>

            <!-- 圆点 -->
            <ol>
                <li></li>
                <li></li>
                <li class="current"></li>
                <li></li>
                <li></li>
            </ol>

        </div>
    </div>

    <!-- 新鲜好物 -->
    <div class="goods1 wrapper">
        <!-- hd header的缩写  头部 -->
        <div class="hd">
            <h2 class="fl">新鲜好物<span>新鲜出炉 品质保证</span></h2>
            <a class="fr" href="#">查看全部</a>
        </div>
        <!-- bd body -->
        <div class="bd clearfix">
            <ul>
                <li class="fl">
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>睿米无线吸尘器F8</h3>
                        <div>￥<sapn>899</sapn></div>
                        <b>新品</b>
                    </a>
                </li>
                <li class="fl">
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>睿米无线吸尘器F8</h3>
                        <div>￥<sapn>899</sapn></div>
                        <b>新品</b>
                    </a>
                </li>                <li class="fl">
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>睿米无线吸尘器F8</h3>
                        <div>￥<sapn>899</sapn></div>
                        <b>新品</b>
                    </a>
                </li>                <li class="fl">
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>睿米无线吸尘器F8</h3>
                        <div>￥<sapn>899</sapn></div>
                        <b>新品</b>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 人气推荐 -->
    <div class="goods1 wrapper">
        <!-- hd header的缩写  头部 -->
        <div class="hd">
            <h2 class="fl">新鲜好物<span>新鲜出炉 品质保证</span></h2>
            <a class="fr" href="#">查看全部</a>
        </div>
        <!-- bd body -->
        <div class="bd clearfix">
            <ul>
                <li class="fl">
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>睿米无线吸尘器F8</h3>
                        <div>￥<sapn>899</sapn></div>
                        <b>新品</b>
                    </a>
                </li>
                <li class="fl">
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>睿米无线吸尘器F8</h3>
                        <div>￥<sapn>899</sapn></div>
                        <b>新品</b>
                    </a>
                </li>                <li class="fl">
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>睿米无线吸尘器F8</h3>
                        <div>￥<sapn>899</sapn></div>
                        <b>新品</b>
                    </a>
                </li>                <li class="fl">
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>睿米无线吸尘器F8</h3>
                        <div>￥<sapn>899</sapn></div>
                        <b>新品</b>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 热门品牌 -->
    <div class="goods3">
        <div class="wrapper">
            <div class="hd">
                <h2 class="fl">热门品牌<span>国际经典 品质保证</span></h2>
                <span class="jiaobiao1 fr"></span>
                <span class="jiaobiao2 fr"></span>
            </div>
            <div class="bd clearfix">
                <ul>
                    <li class="fl">
                        <a href="#">
                            <img src="./uploads/brand_goods_1.jpg" alt="">
                        </a>
                    </li>
                    <li class="fl">
                        <a href="#">
                            <img src="./uploads/brand_goods_2.jpg" alt="">
                        </a>
                    </li><li class="fl">
                        <a href="#">
                            <img src="./uploads/brand_goods_3.jpg" alt="">
                        </a>
                    </li><li class="fl">
                        <a href="#">
                            <img src="./uploads/brand_goods_4.jpg" alt="">
                        </a>
                    </li><li class="fl">
                        <a href="#">
                            <img src="./uploads/brand_goods_5.jpg" alt="">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 生鲜 -->
    <div class="goods2 wrapper">
        <div class="hd">
            <h2 class="fl">生鲜</h2>
            <a href="#" class="more fr">查看更多</a>
            <ul class="fr">
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
            </ul>
        </div>
        <div class="bd clearfix">
            <div class="left fl cl">
                <a href="3"><img src="./uploads/fresh_goods_cover.png" alt=""></a>
            </div>
            <div class="right fl clearfix">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <p class="price">￥59</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_2.jpg" alt="">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <p class="price">￥59</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_4.jpg" alt="">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <p class="price">￥59</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_3.jpg" alt="">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <p class="price">￥59</p>
                        </a>
                    </li>
                    <li class="fresh5">
                        <a href="#">
                            <img src="./uploads/fresh_goods_5.jpg" alt="">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <p class="price">￥59</p>
                        </a>
                    </li>
                    <li class="fresh5">
                        <a href="#">
                            <img src="./uploads/fresh_goods_6.jpg" alt="">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <p class="price">￥59</p>
                        </a>
                    </li><li class="fresh5">
                        <a href="#">
                            <img src="./uploads/fresh_goods_7.jpg" alt="">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <p class="price">￥59</p>
                        </a>
                    </li><li class="fresh5">
                        <a href="#">
                            <img src="./uploads/fresh_goods_8.jpg" alt="">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <p class="price">￥59</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 服饰 -->
    <div class="goods2 wrapper">
        <div class="hd">
            <h2 class="fl">生鲜</h2>
            <a href="#" class="more fr">查看更多</a>
            <ul class="fr">
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
            </ul>
        </div>
        <div class="bd clearfix">
            <div class="left fl cl">
                <a href="3"><img src="./uploads/fresh_goods_cover.png" alt=""></a>
            </div>
            <div class="right fl clearfix">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <p class="price">￥59</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_2.jpg" alt="">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <p class="price">￥59</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_4.jpg" alt="">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <p class="price">￥59</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_3.jpg" alt="">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <p class="price">￥59</p>
                        </a>
                    </li>
                    <li class="fresh5">
                        <a href="#">
                            <img src="./uploads/fresh_goods_5.jpg" alt="">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <p class="price">￥59</p>
                        </a>
                    </li>
                    <li class="fresh5">
                        <a href="#">
                            <img src="./uploads/fresh_goods_6.jpg" alt="">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <p class="price">￥59</p>
                        </a>
                    </li><li class="fresh5">
                        <a href="#">
                            <img src="./uploads/fresh_goods_7.jpg" alt="">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <p class="price">￥59</p>
                        </a>
                    </li><li class="fresh5">
                        <a href="#">
                            <img src="./uploads/fresh_goods_8.jpg" alt="">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <p class="price">￥59</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 最新专题 -->
    <div class="goods4 clearfix">
        <div class="wrapper">
            <div class="hd">
                <h2 class="fl">最新专题</h2>
                <a class="fr more" href="#">查看全部</a>
            </div>
            <div class="bd">
                <ul>
                    <li class="fl">
                        <a href="#">
                            <img src="./uploads/topic_goods_1.jpg" alt="">
                            <h4>吃这些美食才不算辜负自己</h4>
                            <p>餐厨起居洗护好物</p>
                            <span class="love">1220</span><span class="watch">1000</span><span class="pinglun">246</span>
                        </a>
                    </li>
                    <li class="fl">
                        <a href="#">
                            <img src="./uploads/topic_goods_1.jpg" alt="">
                            <h4>吃这些美食才不算辜负自己</h4>
                            <p>餐厨起居洗护好物</p>
                            <span class="love">1220</span><span class="watch">1000</span><span class="pinglun">246</span>
                        </a>
                    </li>
                    <li class="fl">
                        <a href="#">
                            <img src="./uploads/topic_goods_1.jpg" alt="">
                            <h4>吃这些美食才不算辜负自己</h4>
                            <p>餐厨起居洗护好物</p>
                            <span class="love">1220</span><span class="watch">1000</span><span class="pinglun">246</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- footer -->
    <div class="xtx_footer clearfix">
        <div class="wrapper">
            <!-- 客户服务 -->
            <dl>
                <dt>客户服务</dt>
                <dd class="chat">
                    <i class="iconfont icon-xinlangweibo"></i>
                    <p>在线客服</p>
                </dd>
                <dd class="chat2">
                    <i class="iconfont icon-wentifankui"></i>
                    <p>问题反馈</p>
                </dd>
            </dl>
            <dl>
                <dt>客户服务</dt>
                <dd class="chat">
                    <i class="iconfont icon-xinlangweibo"></i>
                    <p>在线客服</p>
                </dd>
                <dd class="chat2">
                    <i class="iconfont icon-wentifankui"></i>
                    <p>问题反馈</p>
                </dd>
            </dl><dl>
                <dt>客户服务</dt>
                <dd class="chat">
                    <i class="iconfont icon-xinlangweibo"></i>
                    <p>在线客服</p>
                </dd>
                <dd class="chat2">
                    <i class="iconfont icon-wentifankui"></i>
                    <p>问题反馈</p>
                </dd>
            </dl><dl>
                <dt>客户服务</dt>
                <dd class="chat">
                    <i class="iconfont icon-xinlangweibo"></i>
                    <p>在线客服</p>
                </dd>
                <dd class="chat2">
                    <i class="iconfont icon-wentifankui"></i>
                    <p>问题反馈</p>
                </dd>
            </dl>
        </div>
    </div>

    <!-- 尾部 版权区域 -->
    <div class="footer">
        <div class="wrapper">
            <div class="top">
                <ul>
                    <li class="fl">
                        <!-- 通过伪元素添加标签实现精灵图 -->
                        <span>价格亲民</span>
                    </li>
                    <li class="fl">
                        <span>价格亲民</span>
                    </li>
                    <li class="fl">
                        <span>价格亲民</span>
                    </li>
                    
                </ul>
            </div>
            <div class="bottom">
                <p>
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> 
                </p>
                <p>CopyRight @ 小兔鲜儿</p>
            </div>
        </div>
    </div>
</body>
</html>
